<template>
    <div class="listTile" @click="clicked">
        <div class="leading"><slot name="leading"></slot></div>
        <div class="listTileTitle">
            <div class="listTitle"><slot name="title"/></div>
            <div class="listSubTitle"><slot name="subTitle"/></div>
        </div>
        <slot class="trailing" name=trailing></slot>
    </div>
</template>
<style>
.listTile {
    display: flex;
    flex-direction: row;
    margin: 5px;
    cursor: pointer;
    padding: 5px;
}
.leading {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.listTileTitle {
    flex-grow: 1;
    justify-content: center;
    display: flex;
    flex-direction: column;
}
.listTitle {
    font-size: 16px;
    font-weight: bold;
}
.listSubTitle {
    font-size: 14px;
}
 p {
     margin: 0px;
 }
</style>
<script lang="ts">
import {Vue, Component} from "vue-property-decorator"
@Component
export default class ListTile extends Vue {
    private clicked(){
        this.$emit("click")
    }
}
</script>